<template>
	<view class="top-bar">
		<u-row justify="space-between" customStyle="height: 60rpx;padding: 10rpx 20rpx">
			<u-col span="1">
				<u-avatar src="../../../../static/avatar/avatar1.jpeg" size="25"></u-avatar>
			</u-col>
			<u-col span="11">
				<u-row>
					<u-col span="10" customStyle="margin-left: 10rpx">
						<view>张三</view>
					</u-col>
					<u-col span="2">
						<u-icon name="plus" color="white" @click="addMsg"></u-icon>
					</u-col>
				</u-row>
			</u-col>
		</u-row>
	</view>
</template>

<script>
	export default {
		name: "top-bar",
		props: ['msgList'],
		data() {
			return {
				list: [],
			};
		},
		created() {
			this.list = this.msgList;
		},
		methods: {
			addMsg() {
				let userId = Math.ceil(Math.random() * 100);
				let avatarId = Math.ceil(Math.random() * 3);
				let msg = {
					name: "用户" + userId,
					time: "2021-12-23",
					content: "我是消息我是消息我是消息我是消息我是消息我是消息我是消息",
					avatar: "../../../../static/avatar/avatar" + avatarId + ".jpeg"
				}
				uni.$emit("addMsg", msg);
				uni.showToast({
					title: "添加成功",
					icon: 'none'
				});

			},
		}
	}
</script>

<style>
	.top-bar {
		color: white;
		background-color: #3C9CFF;
	}
</style>
